import React,{useState} from 'react'
import style from "./index.module.scss"
import {Breadcrumb,Input,Table,Select} from "antd"
const { Option } = Select;
export default function Hetongmuban() {
    const columns =[
        {
            title: '产品编号',
            dataIndex: 'name',
        },
        {
            title: '产品名称',
            dataIndex: 'type',
        },
        {
            title: '业务类型',
            dataIndex: 'num',
        },{
            title:"标签",
            dataIndex:"state",
            render:()=>{
                return (
                    <div className={style.do}>
                        <span>新品：是</span>
                        <span>推荐：是</span>
                    </div>
                )
            }
        },{
            title:"排序",
            dataIndex:"data"
        },{
            title:"更新时间",
            dataIndex:"update"  
        },{
            title:" 发布状态",
            dataIndex:"fabu"
        },{
            title:"操作",
            dataIndex:"caozuo",
            render:()=>{
                return (<div className={style.do}>
                    <span>查看</span>
                    <span>编辑</span>
                    <span>提审</span>
                    <span>删除</span>
                </div>)
                
            }
        }
    ]
    const data = [
        {
            key: 1,
            name: '100001',
            type: '高薪贷',
            num: '个人信用',
            data:'1',
            update:'未审核',
            fabu:"启用中"
        },{
            key: 2,
            name: '100002',
            type: '高薪贷',
            num: '个人信用',
            data:'1',
            update:'未审核',
            fabu:"启用中"
        },
    ]
    const [pageSize, setPageSize] = useState('10')
    const [currentPage, setCurrentPage] = useState('1')
    const getPage = (page, pageSize) => {
        console.log(page, pageSize)
        setCurrentPage(page)
        setPageSize(pageSize)
    }
    return (
        <div className={style.hetong}>
            <Breadcrumb style={{ margin: '16px 0',display:"flex",justifyContent:"start"}}>
                <Breadcrumb.Item>首页</Breadcrumb.Item>
                <Breadcrumb.Item>产品工厂</Breadcrumb.Item>
                <Breadcrumb.Item>贷款产品审核</Breadcrumb.Item>
            </Breadcrumb>
            <div className={style.caozuo}>
                <div className={style.chaxun}>
                    <div className={style.input}>
                        <Select defaultValue="业务类型" style={{ width: 120 }}>
                            <Option value="业务类型">业务类型</Option>
                        </Select>
                    </div>
                    <div className={style.input}>
                        <Select defaultValue="审核状态" style={{ width: 120 }}>
                            <Option value="审核状态">审核状态</Option>
                        </Select>
                    </div>
                    <button className={style.btn}>查询</button>
                </div>
                <div className={style.xinzeng}>
                    <button className={style.btn}>新增</button>
                </div>
            </div>

            <div className='title'>
                    <p>数据列表</p>
                </div>
                    <Table columns={columns} dataSource={data} pagination={{
                            total: data.length,
                            showQuickJumper: true,
                            showSizeChanger: true,
                            pageSizeOptions: ['10', '20', '30'],
                            showTotal: total => `共${Math.ceil(total / pageSize)}页/ ${total} 条数据`,
                            onChange: getPage
                        }}
                            onRow={record => {
                                return {
                                    onClick: event => { console.log(event, record) },
                                }
                            }}
                        />

            <div className={style.footer}>
                Copyright © 2018 深圳市涛涛金融科技有限公司, All Rights Reserved.
            </div>
        </div>
    )
}
